<template>
    <FlexContainer>
        <template slot="rightBottom">
            <TableAutomaticNew
                ref="aviationtable" 
                :checkedField="checkedField"
                :manageColumn="manageColumn"
                :preColumns="preColumns" 
                :pagesize.sync="pagesize" 
                :page.sync="page" 
                :total="total" 
                :pinned="pinned"
                :gridTag="gridTag" 
                exportIcon="airplane/material/export" 
                :fieldConfig="pageTable.fieldConfig" 
                :tableData="pageTable.tableData" 
                @pagination="handleGetTableListByParams()" 
                @modify="handleTableRowAddEvent($event, true)"
                @remove="handleTableRowRemoveEvent"
                >

                <template slot="query">
                    <TableSearchForm
                        ref="tablesearchform"
                        :leftBtnGroup="queryForm.leftBtnGroup"
                        :openSearchProps="queryForm.openSearchProps"
                        :hideSearchProps="queryForm.hideSearchProps"
                        :searchpanel="queryForm.searchpanel"
                        @search="handleGetTableListByParams">
                    </TableSearchForm>
                </template>

                <template slot="pageLeft">
                    <el-button type="primary">批量删除</el-button>
                </template>

            </TableAutomaticNew>

        </template>
    </FlexContainer>
</template>
<script>
    // 布局组件
    import FlexContainer from '@/components/Layout/FlexContainer.vue';

    // 表格组件
    import {
        TableAutomaticNew,
        TableSearchForm,
        singletable
    } from '@/components/ElementTable'

    // 表格固定字段
    import {
        getTableDataList,
        getTableFieldConfig
    } from './components/fieldConfig'

    export default {
        name: 'OnlyTable',
        components: { FlexContainer, TableAutomaticNew, TableSearchForm },
        props: {},
        mixins: [singletable],
        data() {
            return {
                queryForm: {
                    // 按钮操作
                    leftBtnGroup: [
                        {
                            name: '新增',
                            onClick: () => this.handleAddEvent()
                        },
                        {
                            name: '导入',
                            onClick: () => this.handleImportEvent()
                        }
                    ],
                    
                    // 可视查询条件
                    openSearchProps: [
                        {
                            type: 'input',
                            name: '输入条件',
                            key: 'input_data',
                        },
                        {
                            type: 'select',
                            name: '选择条件',
                            key: 'select_data',
                            defaultValue: '0',
                            selectList: [
                                { name: '全部', key: '0' },
                                { name: '类型A', key: '1' },
                                { name: '类型B', key: '2' }
                            ],
                            onChange: (row) => this.hanleSelectChange(row)
                        },
                    ],
                    
                    // 隐藏查询条件
                    hideSearchProps: [
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data1'
                        },
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data2'
                        },
                        {
                            type: 'input',
                            name: '隐藏条件',
                            key: 'hide_data3'
                        },
                    ],
                    
                    // 右上角 C 位查询
                    searchpanel: {
                        placeholder: '请输入右上角关键字',
                        type: 'input',
                        key: 'lock_data',
                    }
                },

                gridTag: 'onlyTable',

                // 页面表格
                pageTable: {
                    // 表格数据
                    tableData: [],

                    // 表格字段
                    fieldConfig: getTableFieldConfig(10)
                },


                // elementTree
                pageTree: {
                    // 当前选中
                    activeSelect: {},
                    // 树的数据 
                    treeData: [],

                    treeRule: {
                        
                    }
                },
            }
        },
        computed: {

        },
        methods: {
            handleGetTableListByParams() {
                // 获取参数
                const params = this.$refs['tablesearchform'].handleCommitSearchPamras()
                // 合并分页参数或者其他参数
                const queryParams = Object.assign({}, params, { page: this.page, pagesize: this.pagesize })
                console.log('queryParams', queryParams)
                this.pageTable.tableData = getTableDataList(this.pageTable.fieldConfig, this.pagesize)
            },

            handleTableRowRemoveEvent(row) {
                console.log('handleTableRowRemoveEvent', row)
            },

            handleTableRowAddEvent(row) {
                console.log('handleTableRowAddEvent', row)
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            // 模拟下
            this.total = 273
            this.handleGetTableListByParams()
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped>

</style>